import React, { Component } from 'react';
import {
  Text,
  View,
 Animated,
 PanResponder,
 NativeModules,
 LayoutAnimation,
 TouchableOpacity,
 StyleSheet
} from 'react-native';
import { StackNavigator} from 'react-navigation';

const {UIManager}=NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);

export default class AnimateScreen extends React.Component{
    static navigationOptions={
        title:'Animated',
    };

    constructor(props){
        super(props);
        this.state={
             w:100,
             h:100,
        };
    }


    _onpress=()=>{
        LayoutAnimation.spring();
        this.setState({w:this.state.w+15,h:this.state.h+15})
    }

    render(){
        const {navigate} =this.props.navigation;

        return(
             <View style={{flex:1}}>
             <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
             <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
             </FadeInView>
             <View style={styles.container}>
                 <View style={[styles.box ,{width:this.state.w,height:this.state.h}]}>
                    <TouchableOpacity onPress={this._onpress}>
                        <View style={styles.button}>
                            <Text style={styles.buttonText}>Press me!</Text>
                        </View>
                    </TouchableOpacity>
                 </View>
             </View>
             </View>
        );
    }
}


 class FadeInView extends Component{
    constructor(props){
       super(props);
       this.state={
          fadeAnim:new Animated.Value(0),    //透明度初始值为0
          twirl:new Animated.Value(0),       //旋转角度
          position:new Animated.ValueXY(),    //初始位置坐标
       };
       this._panResponder=PanResponder.create({
            onStartShouldSetPanResponder:()=>true,   //是否响应手势
            onPanResponderMove:Animated.event(   //手滑动
               [null,{dx:this.state.position.x,dy:this.state.position.y}]  //绑定动画值
            ),
            onPanResponderRelease:()=>{   //手松开 ，回到原来的位置
                Animated.spring(this.state.position,{
                toValue:{x:0,y:0},
              }).start();
            },
            onPanResponderTerminate:()=>{  //手势中断 ，回到原来的位置
                Animated.spring(this.state.position,{
                    toValue:{x:0,y:0},
                  }).start();
            }
       });
    }

    componentDidMount(){
        // Animated.timing(
        //     this.state.fadeAnim,
        //     {
        //         toValue:1,
        //         duration:600,
        //     }
        // ).start();

        Animated.sequence([//顺序执行
            // Animated.decay(this.state.position,{
            //     velocity:{x:gestureState.vx,y:gestureState.vy},
            //     deceleration:0.997,
            // }),
            Animated.timing(
                this.state.fadeAnim,
                {
                    toValue:1,
                    duration:600,
                }
            ),
            Animated.parallel([//同时执行
                Animated.spring(this.state.position,{
                    toValue:{x:123,y:120},
                    duration:2000
                }),
                Animated.timing(this.state.twirl,{
                    toValue:360,
                    duration:2000
                }),
            ])
        ]).start();
    }

    render(){
        return(
            <Animated.View
             style={{
                ...this.props.style,
                opacity: this.state.fadeAnim,

                transform:[
                    {translateX:this.state.position.x},
                    {translateY:this.state.position.y},
                    {rotateZ:this.state.twirl.interpolate({
                        inputRange:[0,360],
                        outputRange:['0deg','360deg'],
                    })},
                ],
            }}
            {...this._panResponder.panHandlers}
            >
            {this.props.children}
            </Animated.View>
        );
    }
}

const styles=StyleSheet.create({
  container:{
     flex:1,
     alignItems:'center',
     justifyContent:'center',
     flexDirection:'column'
  },

  box:{
      width:200,
      height:200,
      backgroundColor:'red',
  },

  button:{
     backgroundColor:'black',
     paddingHorizontal:20,
     paddingVertical:15,
     marginTop:15,
  },

  buttonText:{
      color:'#fff',
      fontWeight:'bold',
  },

});
